<template>
    <div class="pie">
        <chart :options="pieOption"></chart>
        <!-- <div class="legend-box" v-if="pie.legends">
            <table>
                <tr class="legend" v-for="(data, index) in pie.legends" :key="index">
                    <td>
                       <span class="circle" :style="{ background:data.item1.color }"></span>
                        {{ data.item1.rate }},{{ data.item1.name }}
                    </td>
                   <td v-if="data.item2">
                        <span class="circle" :style="{ background:data.item2.color }"></span>
                        {{ data.item2.rate }},{{ data.item2.name }}
                   </td>
                </tr>
            </table>
        </div> -->
    </div>
</template>
<script>
// import { dataFormat } from './pie.js'
export default {
    name: 'ePie',
    props: ['dataOpt', 'title'],
    watch: {
        dataOpt: {
            handler (newVal, oldVal) {
                if (newVal) {
                    this.pieOption.series[0].data = newVal.series
                    this.pieOption.legend.data = newVal.legend
                } else {
                    this.pieOption.series[0].data = oldVal.series
                    this.pieOption.legend.data = oldVal.legend
                }
            },
            deep: true
        }
    },
    data () {
        return {
            pie: null,
            pieOption: {
            //     tooltip: {
            //     // trigger: 'item'
            //     formatter: '{d}%,{b}'
            // },
            legend: {
                type: 'scroll',
                orient: 'horizontal',
                // width: '80%',
                width: '60%',
                // data: this.dataOpt.legend,
                bottom: 'bottom'
            },
            graphic: { // 设置圆环图中间的文字
                type: 'text',
                left: 'center',
                top: 'middle',
                style: {
                    text: this.title,
                    textAlign: 'center',
                    fill: '#000',
                    font: '20px "Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif'
                }
            },
            series: [
                {
                type: 'pie',
                // radius: ['45%', '80%'],
                radius: ['25%', '40%'],
                // avoidLabelOverlap: false,
                // hoverOffset: 0,
                label: {
                    // normal: {
                    // show: false,
                    // position: 'center'
                    // },
                    normal: {
                        formatter: '   {b|{b}：}{c}    {per|{d}%}   ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            // a: {
                            //     color: '#999',
                            //     lineHeight: 18,
                            //     align: 'center'
                            // },
                            // hr: {
                            //     borderColor: '#aaa',
                            //     width: '100%',
                            //     borderWidth: 0.5,
                            //     height: 0
                            // },
                            b: {
                                fontSize: 12,
                                lineHeight: 40
                                // padding: [2, 10]
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                    // emphasis: {
                    // show: true
                    // }
                },
                // labelLine: {
                //     normal: {
                //         show: true
                //     }
                // },
                data: this.dataOpt.data
                }
            ]
            }
        }
    },
   /*  watch: {
        dataOpt: {
            handler: function (val) {
                this.dataOpt = val
                this.handleData()
            }
        }
    }, */
    methods: {
        // handleData () {
        //     this.pie = dataFormat(this.dataOpt)
        //     this.pie.legends.forEach(item => {
        //     })
        // }
    },
    mounted () {
        // this.handleData()
    }
}
</script>
<style lang="stylus">
.pie
    height 100%
    .echarts
        width 100%
    .legend-box
        overflow hidden
        text-align center
        table
            display inline-block
            td
                position relative
                font-size 12px
                heigh 24px
                line-height 24px
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
                text-align left
                padding 0 10px 0 15px
                position relative
                .circle
                    position absolute
                    left 0
                    top 50%
                    width 12px
                    height 12px
                    margin-top -6px
                    border-radius 50%
</style>
